<template>
  <div>
    <el-popover ref="popover" :placement="placement" trigger="click">
      <el-tree
        :data="data"
        :props="props"
        node-key="nodeKey"
        ref="popupTree"
        @current-change="currentChangeHandle"
        :default-expand-all="defaultExpandAll"
        :highlight-current="true"
        :expand-on-click-node="true">
      </el-tree>
    </el-popover>
    <el-input v-model="prop" v-popover:popover :readonly="true" :placeholder="placeholder" style="cursor:pointer;"></el-input>
  </div>
</template>

<script>
export default {
    name: 'PopupTreeInput',
    props: {
        data: {
            type: Array
        },
        props: {
            type: Object
        },
        prop: {
            type: String,
            default: ''
        },
        nodeKey: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '点击选择内容'
        },
        placement: {
            type: String,
            default: 'right-start'
        },
        defaultExpandAll: {
            type: Boolean,
            default: false
        },
        currentChangeHandle: {
            type: Function,
            default: null
        }
    }
}
</script>

<style scoped>

</style>
